<script setup lang="ts">
defineOptions({
  name: "gasBoardLineItem"
});

import { ref, nextTick, defineAsyncComponent, onMounted, inject, computed } from "vue";
// import echartsCom from "@/views/common/components/echartsCom/index.vue";
import { useInitLineEcharts } from "./hooks";

const echartsCom = defineAsyncComponent(() => import("@/views/common/components/echartsCom/index.vue"));

const emitSpcItemEventCb = inject("emitSpcItemEvent") as Function;

const props = withDefaults(
  defineProps<{
    data?: Record<string, any>;
    xAxisDataFormat?: boolean;
    pitchClickEvent?: boolean;
    smooth?: boolean;
    shadow?: boolean;
    markLineData: Array<any>;
    dark?: boolean;
    max?: number | string;
  }>(),
  {
    data: null,
    xAxisDataFormat: true,
    pitchClickEvent: false,
    smooth: false,
    shadow: false,
    markLineData: () => [],
    dark: false
  }
);

const echartsKey = ref<string>(`echartsKey_${Math.random().toString(36).slice(2, 10)}`);
const echartsComRef = ref<InstanceType<typeof echartsCom> | null>(null);
const echartsOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);
const loading = ref<boolean>(false);

const loadingBackground = computed(() => (props.dark ? "rgba(0, 30, 59, 0.8)" : undefined));

const init = async () => {
  loading.value = true;
  useInitLineEcharts(props.data, props.xAxisDataFormat, props.smooth, props.shadow, props.markLineData, props.dark, props.max, async data => {
    echartsOptions.value = data;
    await nextTick();
    loading.value = false;
  });
};

init();

onMounted(async () => {
  await nextTick();
  if (props.pitchClickEvent) {
    setTimeout(async () => {
      const ec = await echartsComRef.value?.getEcharts();
      ec?.getInstance()?.getZr()?.off("click");
      ec
        ?.getInstance()
        ?.getZr()
        ?.on("click", params => {
          emitSpcItemEventCb(params);
        });
    }, 0);
  }
});
</script>

<template>
  <div :class="['gas-board-line-item']">
    <!-- <div class="line-item-title">{{ `${data?.name}${data?.unit ? "（" + data?.unit + "）" : ""}` }}</div> -->
    <div class="line-item-echarts">
      <!-- <div class="echarts-content" v-loading="loading">
        <echartsCom v-if="!loading" ref="echartsComRef" :key="echartsKey" :dark="dark" :options="echartsOptions" />
      </div> -->

      <Suspense>
        <template #fallback>
          <div v-loading="true" :element-loading-background="loadingBackground" class="echarts-fallback" />
        </template>
        <template #default>
          <div class="echarts-content">
            <echartsCom ref="echartsComRef" :key="echartsKey" :dark="dark" :options="echartsOptions" />
          </div>
        </template>
      </Suspense>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.gas-board-line-item {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border-radius: 4px;

  .line-item-title {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 24px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #333;
    text-align: center;
  }

  .line-item-echarts {
    width: 100%;
    // height: calc(100% - 24px);
    height: 100%;

    .echarts-fallback {
      width: 100%;
      height: 100%;
    }

    .echarts-content {
      width: 100%;
      height: 100%;
    }
  }
}

// .gas-board-line-item-dark {
//   // color: #fff;
//   // background-color: #001e3bff;
//   // border: 1px solid #83b2ffff;
//   // box-shadow: inset 0 0 10px 0 #83b2ffff;

//   // .line-item-title {
//   //   color: #fff;
//   // }
// }
</style>
